<template>
  <div style="width: 100%;height: 500px;padding-top:0;margin: 0 ">
    <div class="pageheader">
      <div class="pageheader-1">
        <i class="el-icon-user-solid"></i><label>菜单管理</label>
      </div>
      <div style="height: 100%;position: absolute;top: 20px;left: 350px">
        <el-form ref="key" :model="input">
        <el-input
          style="width: 200px;position: absolute;top: 5px;left: 0px"
          size="small"
          placeholder="搜索"
          suffix-icon="el-icon-search"
          maxlength="20"
          v-model="input.input3">
        </el-input>
        <el-button type="primary" @click="find(key)" class="searchbtn" plain>查询</el-button>
        </el-form>
        <el-button type="primary" v-show="list[0].children[2].showadd" @click="openadd = true" class="add">添加</el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%;height: 80%">

      <el-table-column
        prop="menuid"
        label="菜单编号">
      </el-table-column>
      <el-table-column
        prop="menupid"
        label="上一级">
      </el-table-column>
      <el-table-column
        prop="menuname"
        label="菜单名称">
      </el-table-column>
      <el-table-column
        prop="url"
        label="url">
      </el-table-column>
      <el-table-column
        prop="level"
        label="等级">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="openedits (scope.row)" v-show="list[0].children[2].showedit">修改</el-button>
          <el-button :disabled="true" type="danger"  v-show="list[0].children[2].showdelete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        page-size="5"
        :total="total"
        @current-change="page">
      </el-pagination>
    </div>
    <!--添加 -->
    <el-dialog title="添加菜单"  @close="this.reload" :visible.sync="openadd">
      <el-form :rules="rules" :model="menuform" ref="addform">
        <el-form-item prop="menupid" label="上级菜单" :label-width="width">
          <el-select  v-model="menuform.menupid"  placeholder="请选择上一级菜单">
            <el-option :key="item" v-for="item in menuData" :label="item.menuname" :value="item.menuid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="menuname" label="名称" :label-width="width">
          <el-input  v-model="menuform.menuname" placeholder="请输入菜单名称" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="url" label="url" :label-width="width">
          <el-input v-model="menuform.url"  placeholder="请输入url"  autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary"  @click="add ('addform')">添加</el-button>
        <el-button @click="this.reload">返回</el-button>
      </div>
    </el-dialog>
    <!--添加 -->
    <el-dialog title="修改菜单"  @close="this.reload" :visible.sync="openedit">
      <el-form :rules="rules" :model="e_menuform" ref="editform">
        <el-form-item prop="menuname" label="菜单编号" :label-width="width">
          <el-input :disabled="true" v-model="e_menuform.menuid" placeholder="请输入菜单编号" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="menupid" label="上级菜单" :label-width="width">
          <el-select :disabled="true" v-model="e_menuform.menupid"  placeholder="请选择上一级菜单">
            <el-option :key="item" v-for="item in menuData" :label="item.menuname" :value="item.menuid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="menuname" label="名称" :label-width="width">
          <el-input  v-model="e_menuform.menuname" placeholder="请输入菜单名称" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="url" label="url" :label-width="width">
          <el-input v-model="e_menuform.url"  placeholder="请输入url"  autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="url" label="等级" :label-width="width">
          <el-input :disabled="true" v-model="e_menuform.level"  placeholder="登记"  autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary"  @click="edit ('editform')">添加</el-button>
        <el-button @click="this.reload">返回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  inject: ['meges', 'list', 'reload'],
  methods: {
    // 查询
    find (key) {
    },
    // 分页模块
    page (currentpage) {
      const _this = this
      axios.get('http://localhost:8088/findMenuAll/' + currentpage + '/5').then(function (resp) {
        console.log(resp.data)
        _this.tableData = resp.data.content
        _this.total = resp.data.totalElements
      })
    },
    // 添加菜单
    add (addAction) {
      const _this = this
      this.$refs[addAction].validate((valid) => {
        axios.post('http://localhost:8088/saveMenu', this.menuform).then(function (resp) {
          _this.$message({
            message: '添加成功！',
            type: 'success'
          })
          _this.reload()
        })
      })
    },
    // 修改
    edit (addAction) {
      const _this = this
      this.$refs[addAction].validate((valid) => {
        axios.post('http://localhost:8088/saveMenus', this.e_menuform).then(function (resp) {
          _this.$message({
            message: '修改成功！',
            type: 'success'
          })
          _this.reload()
        })
      })
    },
    openedits (row) {
      this.e_menuform = row
      this.openedit = true
    }
  },
  // 接受后台数据
  created () {
    const _this = this
    axios.get('http://localhost:8088/findMenuAll/1/5').then(function (resp) {
      _this.tableData = resp.data.content
      _this.total = resp.data.totalElements
    })
    axios.get('http://localhost:8088/findMenuAllR').then(function (resp) {
      _this.menuData = resp.data
    })
  },
  //  数据绑定
  data () {
    return {
      total: null,
      openadd: false,
      openedit: false,
      input: {
        input3: ''
      },
      tableData: null,
      formLabelWidth: '60px',
      width: '100px',
      menuform: {
        menuid: '',
        level: '',
        menupid: '',
        menuname: '',
        url: ''
      },
      e_menuform: {
        menuid: '',
        level: '',
        menupid: '',
        menuname: '',
        url: ''
      },
      menuData: null,
      rules: {
        menupid: [
          { required: true, message: '请选择上级菜单', trigger: 'blur' }
        ],
        menuname: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请输入功能路径', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>
